<template>
  <div class="news-content">
    <div class="container">
      <div class="left">
        <app-hot-tag></app-hot-tag>
      </div>
      <div class="right">

        <!--  -->
        <div style="margin-bottom: 20px;">
          <app-detail-icon></app-detail-icon>
        </div>

        <div style="margin-bottom: 20px;">
          <app-detail-title text="热门资讯" ></app-detail-title>
          <app-detail-list list_flag="questions"></app-detail-list>
        </div>
        <!--  -->
        <div style="margin-top: 20px;">
          <swiper :sw_params="sw_params" ></swiper>
          <app-detail-form></app-detail-form>
        </div>
        <!--  -->
        <div style="margin-top: 20px;">
          <app-detail-footer></app-detail-footer>
        </div>
      </div>
      <div class="center">
        <div class="tag-body">
          <div class="tag-body-line">
            <div class="tag-name">问答分类</div>
            <div class="tag-right">
              <div class="tag-item active">经济学</div>
              <div
              v-for="item of 6"
              class="tag-item">哲学</div>
            </div>
          </div>

          <div class="tag-body-line">
            <div class="tag-name">详细分类</div>
            <div class="tag-right">
              <div class="tag-item active">能源经济</div>
              <div
              v-for="item of 3"
              class="tag-item">国际贸易与经济</div>
            </div>
          </div>
        </div>
        <div class="news-body">
          <a class="news-item" v-for="item of 28" href="/questions/1">
            <h1 class="news-title">湖南专升本公办、民办、私立院校三者有什么区别？</h1>
            <div class="news-bot">
              <el-image fit="cover" class="img" src="http://oss.cswendu.com/pc.cswendu.com/fixed-img-for-js/test.png"></el-image>
              <p class="name">小李老师</p>
              <p class="bot-center">大家好，我是辣条。有粉丝朋友私信我要上大学了上大学了上大学了有粉丝朋友私信我要上大学了上大学了上大学了</p>
              <div class="bot-right">
                <el-image fit="contain" class="img" src="/hitt.png"></el-image>
                <p>150</p>
              </div>
            </div>
          </a>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import appDetailList from '@/components/app-detail-list.vue'
import appDetailForm from '@/components/app-detail-form.vue'
import swiper from '@/components/swiper.vue'
import appDetailFooter from '@/components/app-detail-footer.vue'
import appHotTag from '@/components/app-hot-tag.vue'
import appDetailIcon from '@/components/app-detail-icon.vue'
export default {
  name:'questions-index',
  components:{
    appDetailFooter,
    appHotTag,
    appDetailIcon,
    appDetailForm,
    appDetailList
  },
  data(){
    return{
      sw_params:{
        logoOption: {//swiper配置
              loop: true,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              autoplay: {
                delay: 1000,
              }
        },
        data:[
          {
            url:'http://oss.cswendu.com/pc.cswendu.com/fixed-img-for-js/test.png'
          }
        ]
      },

    }
  },
  async asyncData(e){
    // console.log(e)
    // 列表分页 SEO 原理
    //1.通过e获取 当前页面route和分页参数
    //2.通过分页参数在此调用方法渲染页面
    //3.自定义一个分页导航
    //4.分页导航点击的下一页 就是改变页面URL 重新触发ASYNCDATA方法，如/question/1?page=2
  },
  async fetch({$axios,store,error}){

  },
  methods:{

  },
  mounted() {
    this.$api.test.test2({page: 99}).then(res=>{
    		console.log(res)
    })
  }
}
</script>

<style scoped="scoped" lang="scss">
/* .diss{
  width: 500px;
  height: 500px;
  background: url('~static/1.png') repeat;
}
 */
.news-content{
  background-color: #F5F6F7;
  min-height: 1080px;
}
.container{
  padding-top: 20px;
}
.left{
  width: 150px;
  // background-color: white;
  // height: 100px;
  float: left;
}
.right{
  width: 288px;
  // background-color: white;
  // height: 100px;
  float: right;
}
.center{
  width: 730px;
  margin-left: 166px;
  background-color: white;
  .tag-body{
    border-bottom: 16px solid #f5f6f7;
    padding:5px 15px;
    .tag-body-line{
      overflow: hidden;
      border-bottom: 1px dashed #b5b5b6;
      display: flex;
      box-sizing: border-box;
      padding: 10px 0;
      &:last-child{
        border-bottom: 1px dashed transparent;
        padding-bottom: 0;
      }
      .tag-name{
        font-size: 16px;
        color: $text1_color;
        border-right: 1px dashed #b5b5b6;
        width: fit-content;
        width: 86px;
        line-height: 44px;
      }
      .tag-right{
        width: calc(100% - 86px);
        box-sizing: border-box;
        padding:0 10px;
        display: flex;
        flex-wrap: wrap;
        .tag-item{
          margin-right: 10px;
          color: #595757;
          padding: 5px 10px;

          font-size: 16px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s;
          border-radius: 4px;
          margin-bottom: 5px;
          margin-top: 5px;
          &:hover{
            color: white;
            background-color: $active_color;
          }
          &.active{
            color: white;
            background-color: $active_color;
          }
        }
      }
    }
  }
}
.news-item{
  display: block;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #F5F6F7;
  cursor: pointer;
  transition: all 0.3s;

  &:hover{
    box-shadow: 0 0 20px 0 #d1d1d1cc;
    background: #fafafa;
    .news-title{
      color: $active_color;
    }
  }
  .news-title{
    font-size: 18px;
    color: $text1_color;
  }
  .news-bot{
    align-items: center;
    margin-top: 10px;
    display: flex;
    .img{
      width: 24px;
      height: 24px;
      border-radius: 24px;
      overflow: hidden;
      // background-color: black;
      margin-right: 10px;
    }
    .name{
        max-width: 120px;
        @include _one-line();
    }
    .bot-center{
          flex: 40;
          padding-left: 16px;
          color: #8a8a8a;
          font-size: 14px;
          line-height: 24px;
          @include _one-line();
          padding-top: 2px;
    }
    .bot-right{
      line-height: 24px;
      -webkit-box-flex: 1;
      flex: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .img{
        width: 20px;
      }
      p{
        color: #349edf;
        font-size: 14px;
      }
    }
  }
}
</style>
